<template>
  <div class="table-detail-container" relative flex-col-center>
    <!-- 固定顶栏 -->
    <div class="header" flex-center p-15 justify-between>
      <div w-26 h-26 bg-white b-rd-full>
        <el-icon @click="goBack" ml-1 w-22 size="25px" style="cursor: pointer">
          <ArrowLeft></ArrowLeft>
        </el-icon>
      </div>
      <div></div>
    </div>

    <!-- 顶部 -->
    <div class="top" h-230>
      <div flex mt-70 ml-20 text-white>
        <!-- 测评图标 -->
        <div class="table-img">
          <img
            src="https://psystatic.fenxapp.com/uploads/0/1/240607/edb6eba1ce1f61db6c11908057e54c2e.png?x-oss-process=image/auto-orient,1/interlace,1/resize,m_lfit,w_300,1/format,webp"
            w-100
            h-100
            b-rd-20
          />
        </div>
        <!-- 测评基本信息 -->
        <div class="table-message" ml-15 mt-30>
          <div class="table-name" flex>
            <h3 text-20 fw-bold>人格障碍诊断问卷（修订版）</h3>
            <div class="table-name-abbr" text-10 p-3 h-18 ml-5 mt-3>PDQ+4</div>
          </div>
          <div class="desc" mt-10>
            <div class="desc-text">
              评估人格障碍，涵盖12领域，广泛应用于精神疾病和健康人群
            </div>
          </div>
        </div>
      </div>
    </div>

    <div mt--30>
      <!-- 荣誉 -->
      <div class="honor" b-rd-30 h-100>
        <!-- 荣誉项 -->
        <div class="honor-items" flex-center text-white>
          <div class="honor-item">
            <div class="honor-item-icon">
              <img
                src="https://psystatic.fenxapp.com/images/icon/quanwei.240507.png?x-oss-process=image/format,webp"
                alt=""
                w-16
                h-16
              />
            </div>
            <div class="honor-item-name" ml-5 text-14>权威测评</div>
          </div>

          <div class="honor-item">
            <div class="honor-item-icon">
              <img
                src="https://psystatic.fenxapp.com/images/icon/zhuanye.240507.png?x-oss-process=image/format,webp"
                alt=""
                w-16
                h-16
              />
            </div>
            <div class="honor-item-name" ml-5 text-14>专业分析</div>
          </div>

          <div class="honor-item">
            <div class="honor-item-icon">
              <img
                src="https://psystatic.fenxapp.com/images/icon/yinsi.240507.png?x-oss-process=image/format,webp"
                alt=""
                w-16
                h-16
              />
            </div>
            <div class="honor-item-name" ml-5 text-14>隐私保障</div>
          </div>
        </div>
      </div>

      <!-- 量表详情 -->
      <div class="main" p-15 b-rd-30 mt--70 style="background-color: #f8f7f4">
        <!-- 量表数据 -->
        <div class="static-items" flex-center justify-between>
          <div class="static-item static-times">
            <StaticItemCard
              :data="{
                title: '测评次数/次',
                icon: 'psy-fire',
                color: '#f26101',
                value: '14700',
              }"
            ></StaticItemCard>
          </div>
          <div class="static-item static-my-times">
            <StaticItemCard
              :data="{
                title: '我的测评/次',
                icon: 'psy-user',
                color: '',
                value: '1',
              }"
            ></StaticItemCard>
          </div>
          <div class="static-item static-special">
            <StaticItemCard
              :data="{
                title: '特定人群',
                icon: 'psy-special',
                color: '',
                value: '不限制',
              }"
            ></StaticItemCard>
          </div>
          <div class="static-item static-question-num">
            <StaticItemCard
              :data="{
                title: '题数/题',
                icon: 'psy-exercise',
                color: '',
                value: '107',
              }"
            ></StaticItemCard>
          </div>
          <div class="static-item static-id">
            <StaticItemCard
              :data="{
                title: '编号',
                icon: 'psy-flag',
                color: '',
                value: '#14614',
              }"
            ></StaticItemCard>
          </div>
        </div>

        <!-- 测评介绍 -->
        <div
          class="table-introduction-title"
          m-20
          ml-10
          text-18
          fw-bold
          flex
          justify-between
        >
          <h4>测评介绍</h4>
        </div>
        <div class="table-introduction">
          <el-card shadow="never" style="border: none; border-radius: 10px">
            <!-- 引语 -->
            <div
              class="quotation"
              p-10
              b-rd-10
              style="background-color: #f8f7f4"
            >
              <p text-14 lh-20>
                PDQ+4是根据DSM-IV对PDQ进行修订而来的，包括107个项目，归为12个领域，用于评估不同类型的人格障碍。该问卷应用范围较广，既可以用于评估精神疾病人群，也可以用于健康人群的测试。通过PDQ+4的评估，被测试者可以更好地了解自己的人格特征和问题，从而采取相应的措施进行调整和干预。
              </p>
            </div>

            <!-- 介绍项列表 -->
            <div class="table-intro-items">
              <div v-for="item in introItemDatas" :key="item.title">
                <IntroItem :data="item" mt-20></IntroItem>
              </div>
            </div>
          </el-card>
        </div>
      </div>

      <!-- Tag 列表 -->
      <div class="tags" p-15 flex flex-wrap>
        <div class="tag" mr-10 p-10 bg-white b-rd-5 text-14>#Discorder</div>
        <div class="tag" mr-10 p-10 bg-white b-rd-5 text-14>#Discorder</div>
        <div class="tag" mr-10 p-10 bg-white b-rd-5 text-14>#Discorder</div>
        <div class="tag" mr-10 p-10 bg-white b-rd-5 text-14>#Discorder</div>
        <div class="tag" mr-10 p-10 bg-white b-rd-5 text-14>#Discorder</div>
        <div class="tag" mr-10 p-10 bg-white b-rd-5 text-14>#Discorder</div>
      </div>
    </div>

    <div h-100></div>

    <!-- 固定底栏 -->
    <div class="footer" flex-center justify-between>
      <div></div>
      <el-button type="primary" size="large">开始测试</el-button>
    </div>
  </div>
</template>

<script setup>
import IntroItem from "./components/IntroItem.vue";
import StaticItemCard from "./components/StaticItemCard.vue";

const goBack = () => {
  window.history.go(-1);
};

const introItemDatas = [
  {
    title: "适用人群",
    type: "text",
    info: [
      {
        key: "",
        value:
          "PDQ+4适用于所有对自身人格特征感兴趣的人群，无论是希望了解自身人格状态的普通人士，还是需要监测自身人格变化的特殊人群。通过定期的自我评估，您可以更好地理解和管理自己的人格特征。",
      },
    ],
  },
  {
    title: "12 个主要维度",
    type: "table",
    info: [
      {
        key: "偏执型（Paranoid Personality Disorder）",
        value:
          "以长期的怀疑和不信任他人为特征，常常认为他人有恶意并且难以原谅。",
      },
      {
        key: "分裂性（Schizoid Personality Disorder）",
        value: "以社交关系冷漠、情感疏离和对亲密关系缺乏兴趣为特征，偏好独处。",
      },
      {
        key: "分裂型（Schizotypal Personality Disorder）",
        value:
          "以认知或感知扭曲、奇怪的行为和思维模式以及严重的社交焦虑为特征。",
      },
      {
        key: "癔病型（Histrionic Personality Disorder）",
        value:
          "以过度情绪化和寻求关注的行为为特征，常常表现为戏剧化和夸张的情感表达。",
      },
      {
        key: "自恋型（Narcissistic Personality Disorder）",
        value:
          "以极度的自我重要感、需要他人赞美以及缺乏对他人情感的共鸣为特征。",
      },
      {
        key: "边缘型（Borderline Personality Disorder）",
        value: "以情绪不稳定、人际关系动荡、自我形象不稳定和冲动行为为特征。",
      },
      {
        key: "反社会型（Antisocial Personality Disorder）",
        value:
          "以无视社会规范和他人权利的行为为特征，常表现为欺骗、操控和冲动。",
      },
      {
        key: "回避型（Avoidant Personality Disorder）",
        value: "以强烈的社交抑制、对负面评价的高度敏感和避免社交互动为特征。",
      },
      {
        key: "依赖型（Dependent Personality Disorder）",
        value: "以过度依赖他人和害怕独立决策为特征，常常需要他人的指导和支持。",
      },
      {
        key: "强迫型（Obsessive-Compulsive Personality Disorder）",
        value: "以过度的完美主义、对控制的需求和专注于细节、规则和秩序为特征。",
      },
      {
        key: "被动攻击型（Passive-Aggressive Personality Disorder）",
        value: "以消极抵抗和敌对行为为特征，常通过拖延和消极态度来对抗他人。",
      },
      {
        key: "抑郁型（Depressive Personality Disorder）",
        value: "以持续的抑郁情绪、对生活失去兴趣和自我评价低为特征。",
      },
    ],
  },
  {
    title: "测评作用",
    type: "list",
    info: [
      {
        key: "筛查人格障碍",
        value: "作为筛查工具，帮助识别个体可能存在的人格障碍和问题。",
      },
      {
        key: "评估治疗效果",
        value: "用于定期监测人格特征变化，评估治疗或干预措施的效果。",
      },
      {
        key: "研究人格特征",
        value: "在研究领域，量化和比较不同人群或不同治疗干预的人格状况。",
      },
      {
        key: "指导治疗计划",
        value: "评估结果可帮助专业人士调整或制定个体化的治疗计划。",
      },
      {
        key: "初步评估",
        value: "为专业人士提供初步的人格特征信息，以便进行更深入的诊断和评估。",
      },
      {
        key: "监测人格状态",
        value: "在非临床设置中，用于监测一般人群的人格特征和变化。",
      },
    ],
  },
];
</script>

<script>
/**
 * 量表详情页
 * 负责人：唐诗轶
 */
export default {
  name: "TableDetail",
};
</script>

<style lang="scss" scoped>
.header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 840px;
  height: 50px;
  background-color: rgba(0, 0, 0, 40%);
}

.top {
  background: linear-gradient(to top, rgb(97, 38, 109), rgb(20, 20, 54));

  .table-name-abbr {
    border: 1px solid rgba(255, 255, 255, 80%);
    border-radius: 5px;
  }
}

.honor {
  background: linear-gradient(
    145deg,
    rgb(255, 101, 71),
    rgb(255, 177, 68) 51%,
    rgb(255, 112, 83)
  );

  .honor-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 7px 10px;
  }
}

.main {
  .quotation {
    border-left: 5px solid rgba(0, 0, 0, 30%);
  }
}

.footer {
  position: fixed;
  bottom: 0;
  width: 840px;
  // height: 60px;
  padding: 30px 50px;
  // background-color: rgba(255, 255, 255, 90%);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  // box-shadow: 0 0 10px rgba(0, 0, 0, 10%);
}
</style>
